<template>
  <div id="producthot">
    <scroller scrollbar-y lock-x @on-scroll-bottom="onScrollTalkBottom" slot="hotlist" ref="allsearch">
      <div class="hotitems" name="hotlist">
        <div class="hotitem" v-for="(item, index) in talklists" :key="index" @click="routeto('productdetail', {id: item.id})">
          <div class="imgarea">
            <img :src="item.img">
          </div>
          <p class="hotitemtitle">{{item.title}}</p>
          <div class="hotitemprice"><span>{{item.price}}</span>积分<a href="javascript:;" :class="{ 'producthot-toBuyBtn': item.stockQty === '0' || item.stockQty === '' }" @click.stop="fastToBuy(index)">{{ item.stockQty === '0' || item.stockQty === '' ? '已兑完' : '兑换'}}</a></div>
        </div>
      </div>
      <!-- <div class="searcharr" name="hotlist">
        <cell :title="aitem.title" @click.native="routeto('productdetail', { id: aitem.id })" :border-intent="false" v-for="(aitem, aindex) in talklists" :key="aindex">
          <div class="searchdesc" slot="after-title"><span class="hotcolor">{{ aitem.price }}</span>积分<a href="javascript:;" @click.stop="fastToBuy(aindex)">兑换</a></div>
          <img class="searchimg" slot="icon" :src="aitem.img" alt="">
        </cell>
        <load-more :value="isloadtalk" :show-loading="isloadtalk" :tip="loadtip" style="margin: .5rem auto;">Loading</load-more>
      </div> -->
    </scroller>
    <loading :show="buyloadtoast" :text="'加载中...'"></loading>
    <confirm v-model="showconfirm"
      :content="confirmtxt"
      :close-on-confirm="false"
      @on-cancel="cancelConfirm"
      @on-confirm="okConfirm">
    </confirm>
  </div>
</template>

<script>
  import { Search, Cell, LoadMore, Scroller, Loading, Confirm } from 'vux'

  export default {
    name: 'producthot',
    components: {
      Search,
      Cell,
      LoadMore,
      Scroller,
      Loading,
      Confirm
    },
    data () {
      return {
        isloadtalk: false,
        talklists: [],
        loadtip: '',
        buyloadtoast: false,
        showconfirm: false,
        confirmtxt: '',
        fastarr: ''
      }
    },
    created () {
      this.getList(this.searchtxt)
      .then((data) => {
        this.talklists.push.apply(this.talklists, data)
        this.$nextTick(() => {
          this.$refs.allsearch.reset()
        })
      }, () => {})
    },
    methods: {
      getList: function () {
        return this.$axios.post(this.apidomain + '/api/integralMall/queryProductInfoListSearch/' + this.getCookie('appid'), {
          pageIndex: this.talklists.length,
          openId: this.getCookie('openid'),
          name: '100'
        })
        .then((response) => {
          return response.data.data
        })
        .catch(function (error) {
          console.log(error)
          return []
        })
      },
      onScrollTalkBottom () {
        if (this.onFetching) {
          if (!this.isloadtalk) {
            this.isloadtalk = true
            this.loadtip = '加载中'
            this.getList(this.searchtxt)
            .then((data) => {
              this.talklists.push.apply(this.talklists, data)
              this.$nextTick(() => {
                this.$refs.allsearch.reset()
              })
            }, () => {})
            setTimeout(() => {
              this.isloadtalk = false
              this.loadtip = ''
            }, 1000)
          } else {
            this.$nextTick(() => {
              this.$refs.allsearch.reset()
            })
          }
        } else {
          this.onFetching = true
          setTimeout(() => {
            this.onFetching = false
          }, 1000)
        }
      },
      fastToBuy: function (index) {
        let buyinfo = this.talklists[index]
        this.fastarr = buyinfo
        if (buyinfo.stockQty !== '0' && buyinfo.stockQty !== '') {
          if (buyinfo.type === '1') {
            this.confirmtxt = '本次兑换将消耗' + 1 * buyinfo.price + '积分，兑换成功后可至兑换记录页面查看，确认兑换吗？'
            this.showconfirm = true
          } else {
            this.routeto('productdetail', {id: buyinfo.id})
          }
        }
      },
      cancelConfirm: function () {
        this.showconfirm = false
      },
      okConfirm: function () {
        this.showconfirm = false
        this.buyloadtoast = true
        let sdata = [{
          'id': this.fastarr.id,
          'num': 1,
          'weight': ''
        }]
        this.$axios.post(this.apidomain + '/api/integralMall/saveConfirmOrder/' + this.getCookie('appid'), {
          data: sdata,
          openId: this.getCookie('openid'),
          name: '',
          phone: '',
          address: '',
          province: '',
          city: '',
          district: ''
        })
        .then((response) => {
          this.buyloadtoast = false
          if (response.data.errorCode === '0') {
            this.routeto('orderdetail', {id: response.data.data.id})
          } else {
            window.alert(response.data.errorMsg)
          }
        })
      }
    }
  }
</script>

<style lang="less">
@import '../assets/less/product/hot.less';
</style>
